<template>
  <div>
    <div id="xzreport_1_echo"></div>
  </div>

</template>

<script>
import "@/assets/XZReport/xzreport.css";
import "@/assets/XZReport/xzreport";

export default {
  data() {
    return {
      spreadSheet: null,

      isReject: false,
      xzOnUpdateData: [
        {
          "name": "商品区域销售",
          "id": "商品区域销售",
          "type": 4,
          "response_data": [
            {
              "商品": "笔记本电脑",
              "区域名称": "北京",
              "年份": "2020",
              "季度": "1",
              "销售额": 1500,
              "目标完成比": 15
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "上海",
              "年份": "2020",
              "季度": "1",
              "销售额": 1600,
              "目标完成比": 15
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "深圳",
              "年份": "2020",
              "季度": "1",
              "销售额": 1700,
              "目标完成比": 15
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "广州",
              "年份": "2020",
              "季度": "1",
              "销售额": 1700,
              "目标完成比": 15
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "杭州",
              "年份": "2020",
              "季度": "1",
              "销售额": 1700,
              "目标完成比": 15
            },
            {
              "商品": "台式电脑",
              "区域名称": "北京",
              "年份": "2020",
              "季度": "1",
              "销售额": 900,
              "目标完成比": 15
            },
            {
              "商品": "台式电脑",
              "区域名称": "上海",
              "年份": "2020",
              "季度": "1",
              "销售额": 1200,
              "目标完成比": 15
            },
            {
              "商品": "台式电脑",
              "区域名称": "深圳",
              "年份": "2020",
              "季度": "1",
              "销售额": 1400,
              "目标完成比": 15
            },
            {
              "商品": "台式电脑",
              "区域名称": "广州",
              "年份": "2020",
              "季度": "1",
              "销售额": 1400,
              "目标完成比": 15
            },
            {
              "商品": "台式电脑",
              "区域名称": "杭州",
              "年份": "2020",
              "季度": "1",
              "销售额": 1400,
              "目标完成比": 15
            },
            {
              "商品": "PURA70",
              "区域名称": "北京",
              "年份": "2020",
              "季度": "1",
              "销售额": 7900,
              "目标完成比": 15
            },
            {
              "商品": "PURA70",
              "区域名称": "上海",
              "年份": "2020",
              "季度": "1",
              "销售额": 8200,
              "目标完成比": 15
            },
            {
              "商品": "PURA70",
              "区域名称": "深圳",
              "年份": "2020",
              "季度": "1",
              "销售额": 8400,
              "目标完成比": 15
            },
            {
              "商品": "PURA70",
              "区域名称": "广州",
              "年份": "2020",
              "季度": "1",
              "销售额": 8400,
              "目标完成比": 15
            },
            {
              "商品": "PURA70",
              "区域名称": "杭州",
              "年份": "2020",
              "季度": "1",
              "销售额": 8400,
              "目标完成比": 15
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "北京",
              "年份": "2020",
              "季度": "2",
              "销售额": 1500,
              "目标完成比": 30
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "上海",
              "年份": "2020",
              "季度": "2",
              "销售额": 1600,
              "目标完成比": 30
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "深圳",
              "年份": "2020",
              "季度": "2",
              "销售额": 1700,
              "目标完成比": 30
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "广州",
              "年份": "2020",
              "季度": "2",
              "销售额": 1700,
              "目标完成比": 30
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "杭州",
              "年份": "2020",
              "季度": "2",
              "销售额": 1700,
              "目标完成比": 30
            },
            {
              "商品": "台式电脑",
              "区域名称": "北京",
              "年份": "2020",
              "季度": "2",
              "销售额": 900,
              "目标完成比": 30
            },
            {
              "商品": "台式电脑",
              "区域名称": "上海",
              "年份": "2020",
              "季度": "2",
              "销售额": 1200,
              "目标完成比": 30
            },
            {
              "商品": "台式电脑",
              "区域名称": "深圳",
              "年份": "2020",
              "季度": "2",
              "销售额": 1400,
              "目标完成比": 30
            },
            {
              "商品": "台式电脑",
              "区域名称": "广州",
              "年份": "2020",
              "季度": "2",
              "销售额": 1400,
              "目标完成比": 30
            },
            {
              "商品": "台式电脑",
              "区域名称": "杭州",
              "年份": "2020",
              "季度": "2",
              "销售额": 1400,
              "目标完成比": 30
            },
            {
              "商品": "PURA70",
              "区域名称": "北京",
              "年份": "2020",
              "季度": "2",
              "销售额": 7900,
              "目标完成比": 30
            },
            {
              "商品": "PURA70",
              "区域名称": "上海",
              "年份": "2020",
              "季度": "2",
              "销售额": 8200,
              "目标完成比": 30
            },
            {
              "商品": "PURA70",
              "区域名称": "深圳",
              "年份": "2020",
              "季度": "2",
              "销售额": 8400,
              "目标完成比": 30
            },
            {
              "商品": "PURA70",
              "区域名称": "广州",
              "年份": "2020",
              "季度": "2",
              "销售额": 8400,
              "目标完成比": 30
            },
            {
              "商品": "PURA70",
              "区域名称": "杭州",
              "年份": "2020",
              "季度": "2",
              "销售额": 8400,
              "目标完成比": 30
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "北京",
              "年份": "2020",
              "季度": "3",
              "销售额": 1500,
              "目标完成比": 56
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "上海",
              "年份": "2020",
              "季度": "3",
              "销售额": 1600,
              "目标完成比": 56
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "深圳",
              "年份": "2020",
              "季度": "3",
              "销售额": 1700,
              "目标完成比": 56
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "广州",
              "年份": "2020",
              "季度": "3",
              "销售额": 1700,
              "目标完成比": 56
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "杭州",
              "年份": "2020",
              "季度": "3",
              "销售额": 1700,
              "目标完成比": 56
            },
            {
              "商品": "台式电脑",
              "区域名称": "北京",
              "年份": "2020",
              "季度": "3",
              "销售额": 900,
              "目标完成比": 56
            },
            {
              "商品": "台式电脑",
              "区域名称": "上海",
              "年份": "2020",
              "季度": "3",
              "销售额": 1200,
              "目标完成比": 56
            },
            {
              "商品": "台式电脑",
              "区域名称": "深圳",
              "年份": "2020",
              "季度": "3",
              "销售额": 1400,
              "目标完成比": 56
            },
            {
              "商品": "台式电脑",
              "区域名称": "广州",
              "年份": "2020",
              "季度": "3",
              "销售额": 1400,
              "目标完成比": 56
            },
            {
              "商品": "台式电脑",
              "区域名称": "杭州",
              "年份": "2020",
              "季度": "3",
              "销售额": 1400,
              "目标完成比": 56
            },
            {
              "商品": "PURA70",
              "区域名称": "北京",
              "年份": "2020",
              "季度": "3",
              "销售额": 7900,
              "目标完成比": 56
            },
            {
              "商品": "PURA70",
              "区域名称": "上海",
              "年份": "2020",
              "季度": "3",
              "销售额": 8200,
              "目标完成比": 56
            },
            {
              "商品": "PURA70",
              "区域名称": "深圳",
              "年份": "2020",
              "季度": "3",
              "销售额": 8400,
              "目标完成比": 56
            },
            {
              "商品": "PURA70",
              "区域名称": "广州",
              "年份": "2020",
              "季度": "3",
              "销售额": 8400,
              "目标完成比": 56
            },
            {
              "商品": "PURA70",
              "区域名称": "杭州",
              "年份": "2020",
              "季度": "3",
              "销售额": 8400,
              "目标完成比": 56
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "北京",
              "年份": "2020",
              "季度": "4",
              "销售额": 1500,
              "目标完成比": 90
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "上海",
              "年份": "2020",
              "季度": "4",
              "销售额": 1600,
              "目标完成比": 90
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "深圳",
              "年份": "2020",
              "季度": "4",
              "销售额": 1700,
              "目标完成比": 90
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "广州",
              "年份": "2020",
              "季度": "4",
              "销售额": 1700,
              "目标完成比": 90
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "杭州",
              "年份": "2020",
              "季度": "4",
              "销售额": 1700,
              "目标完成比": 90
            },
            {
              "商品": "台式电脑",
              "区域名称": "北京",
              "年份": "2020",
              "季度": "4",
              "销售额": 900,
              "目标完成比": 90
            },
            {
              "商品": "台式电脑",
              "区域名称": "上海",
              "年份": "2020",
              "季度": "4",
              "销售额": 1200,
              "目标完成比": 90
            },
            {
              "商品": "台式电脑",
              "区域名称": "深圳",
              "年份": "2020",
              "季度": "4",
              "销售额": 1400,
              "目标完成比": 90
            },
            {
              "商品": "台式电脑",
              "区域名称": "广州",
              "年份": "2020",
              "季度": "4",
              "销售额": 1400,
              "目标完成比": 90
            },
            {
              "商品": "台式电脑",
              "区域名称": "杭州",
              "年份": "2020",
              "季度": "4",
              "销售额": 1400,
              "目标完成比": 90
            },
            {
              "商品": "PURA70",
              "区域名称": "北京",
              "年份": "2020",
              "季度": "4",
              "销售额": 7900,
              "目标完成比": 90
            },
            {
              "商品": "PURA70",
              "区域名称": "上海",
              "年份": "2020",
              "季度": "4",
              "销售额": 8200,
              "目标完成比": 90
            },
            {
              "商品": "PURA70",
              "区域名称": "深圳",
              "年份": "2020",
              "季度": "4",
              "销售额": 8400,
              "目标完成比": 90
            },
            {
              "商品": "PURA70",
              "区域名称": "广州",
              "年份": "2020",
              "季度": "4",
              "销售额": 8400,
              "目标完成比": 90
            },
            {
              "商品": "PURA70",
              "区域名称": "杭州",
              "年份": "2020",
              "季度": "4",
              "销售额": 8400,
              "目标完成比": 90
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "北京",
              "年份": "2021",
              "季度": "1",
              "销售额": 1500,
              "目标完成比": 18
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "上海",
              "年份": "2021",
              "季度": "1",
              "销售额": 1600,
              "目标完成比": 18
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "深圳",
              "年份": "2021",
              "季度": "1",
              "销售额": 1700,
              "目标完成比": 18
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "广州",
              "年份": "2021",
              "季度": "1",
              "销售额": 1700,
              "目标完成比": 18
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "杭州",
              "年份": "2021",
              "季度": "1",
              "销售额": 1700,
              "目标完成比": 18
            },
            {
              "商品": "台式电脑",
              "区域名称": "北京",
              "年份": "2021",
              "季度": "1",
              "销售额": 900,
              "目标完成比": 18
            },
            {
              "商品": "台式电脑",
              "区域名称": "上海",
              "年份": "2021",
              "季度": "1",
              "销售额": 1200,
              "目标完成比": 18
            },
            {
              "商品": "台式电脑",
              "区域名称": "深圳",
              "年份": "2021",
              "季度": "1",
              "销售额": 1400,
              "目标完成比": 18
            },
            {
              "商品": "台式电脑",
              "区域名称": "广州",
              "年份": "2021",
              "季度": "1",
              "销售额": 1400,
              "目标完成比": 18
            },
            {
              "商品": "台式电脑",
              "区域名称": "杭州",
              "年份": "2021",
              "季度": "1",
              "销售额": 1400,
              "目标完成比": 18
            },
            {
              "商品": "PURA70",
              "区域名称": "北京",
              "年份": "2021",
              "季度": "1",
              "销售额": 7900,
              "目标完成比": 18
            },
            {
              "商品": "PURA70",
              "区域名称": "上海",
              "年份": "2021",
              "季度": "1",
              "销售额": 8200,
              "目标完成比": 18
            },
            {
              "商品": "PURA70",
              "区域名称": "深圳",
              "年份": "2021",
              "季度": "1",
              "销售额": 8400,
              "目标完成比": 18
            },
            {
              "商品": "PURA70",
              "区域名称": "广州",
              "年份": "2021",
              "季度": "1",
              "销售额": 8400,
              "目标完成比": 18
            },
            {
              "商品": "PURA70",
              "区域名称": "杭州",
              "年份": "2021",
              "季度": "1",
              "销售额": 8400,
              "目标完成比": 18
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "北京",
              "年份": "2021",
              "季度": "2",
              "销售额": 1500,
              "目标完成比": 39
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "上海",
              "年份": "2021",
              "季度": "2",
              "销售额": 1600,
              "目标完成比": 39
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "深圳",
              "年份": "2021",
              "季度": "2",
              "销售额": 1700,
              "目标完成比": 39
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "广州",
              "年份": "2021",
              "季度": "2",
              "销售额": 1700,
              "目标完成比": 39
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "杭州",
              "年份": "2021",
              "季度": "2",
              "销售额": 1700,
              "目标完成比": 39
            },
            {
              "商品": "台式电脑",
              "区域名称": "北京",
              "年份": "2021",
              "季度": "2",
              "销售额": 900,
              "目标完成比": 39
            },
            {
              "商品": "台式电脑",
              "区域名称": "上海",
              "年份": "2021",
              "季度": "2",
              "销售额": 1200,
              "目标完成比": 39
            },
            {
              "商品": "台式电脑",
              "区域名称": "深圳",
              "年份": "2021",
              "季度": "2",
              "销售额": 1400,
              "目标完成比": 39
            },
            {
              "商品": "台式电脑",
              "区域名称": "广州",
              "年份": "2021",
              "季度": "2",
              "销售额": 1400,
              "目标完成比": 39
            },
            {
              "商品": "台式电脑",
              "区域名称": "杭州",
              "年份": "2021",
              "季度": "2",
              "销售额": 1400,
              "目标完成比": 39
            },
            {
              "商品": "PURA70",
              "区域名称": "北京",
              "年份": "2021",
              "季度": "2",
              "销售额": 7900,
              "目标完成比": 39
            },
            {
              "商品": "PURA70",
              "区域名称": "上海",
              "年份": "2021",
              "季度": "2",
              "销售额": 8200,
              "目标完成比": 39
            },
            {
              "商品": "PURA70",
              "区域名称": "深圳",
              "年份": "2021",
              "季度": "2",
              "销售额": 8400,
              "目标完成比": 39
            },
            {
              "商品": "PURA70",
              "区域名称": "广州",
              "年份": "2021",
              "季度": "2",
              "销售额": 8400,
              "目标完成比": 39
            },
            {
              "商品": "PURA70",
              "区域名称": "杭州",
              "年份": "2021",
              "季度": "2",
              "销售额": 8400,
              "目标完成比": 39
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "北京",
              "年份": "2021",
              "季度": "3",
              "销售额": 1500,
              "目标完成比": 61
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "上海",
              "年份": "2021",
              "季度": "3",
              "销售额": 1600,
              "目标完成比": 61
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "深圳",
              "年份": "2021",
              "季度": "3",
              "销售额": 1700,
              "目标完成比": 61
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "广州",
              "年份": "2021",
              "季度": "3",
              "销售额": 1700,
              "目标完成比": 61
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "杭州",
              "年份": "2021",
              "季度": "3",
              "销售额": 1700,
              "目标完成比": 61
            },
            {
              "商品": "台式电脑",
              "区域名称": "北京",
              "年份": "2021",
              "季度": "3",
              "销售额": 900,
              "目标完成比": 61
            },
            {
              "商品": "台式电脑",
              "区域名称": "上海",
              "年份": "2021",
              "季度": "3",
              "销售额": 1200,
              "目标完成比": 61
            },
            {
              "商品": "台式电脑",
              "区域名称": "深圳",
              "年份": "2021",
              "季度": "3",
              "销售额": 1400,
              "目标完成比": 61
            },
            {
              "商品": "台式电脑",
              "区域名称": "广州",
              "年份": "2021",
              "季度": "3",
              "销售额": 1400,
              "目标完成比": 61
            },
            {
              "商品": "台式电脑",
              "区域名称": "杭州",
              "年份": "2021",
              "季度": "3",
              "销售额": 1400,
              "目标完成比": 61
            },
            {
              "商品": "PURA70",
              "区域名称": "北京",
              "年份": "2021",
              "季度": "3",
              "销售额": 7900,
              "目标完成比": 61
            },
            {
              "商品": "PURA70",
              "区域名称": "上海",
              "年份": "2021",
              "季度": "3",
              "销售额": 8200,
              "目标完成比": 61
            },
            {
              "商品": "PURA70",
              "区域名称": "深圳",
              "年份": "2021",
              "季度": "3",
              "销售额": 8400,
              "目标完成比": 61
            },
            {
              "商品": "PURA70",
              "区域名称": "广州",
              "年份": "2021",
              "季度": "3",
              "销售额": 8400,
              "目标完成比": 61
            },
            {
              "商品": "PURA70",
              "区域名称": "杭州",
              "年份": "2021",
              "季度": "3",
              "销售额": 8400,
              "目标完成比": 61
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "北京",
              "年份": "2021",
              "季度": "4",
              "销售额": 1500,
              "目标完成比": 98
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "上海",
              "年份": "2021",
              "季度": "4",
              "销售额": 1600,
              "目标完成比": 98
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "深圳",
              "年份": "2021",
              "季度": "4",
              "销售额": 1700,
              "目标完成比": 98
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "广州",
              "年份": "2021",
              "季度": "4",
              "销售额": 1700,
              "目标完成比": 98
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "杭州",
              "年份": "2021",
              "季度": "4",
              "销售额": 1700,
              "目标完成比": 98
            },
            {
              "商品": "台式电脑",
              "区域名称": "北京",
              "年份": "2021",
              "季度": "4",
              "销售额": 900,
              "目标完成比": 98
            },
            {
              "商品": "台式电脑",
              "区域名称": "上海",
              "年份": "2021",
              "季度": "4",
              "销售额": 1200,
              "目标完成比": 98
            },
            {
              "商品": "台式电脑",
              "区域名称": "深圳",
              "年份": "2021",
              "季度": "4",
              "销售额": 1400,
              "目标完成比": 98
            },
            {
              "商品": "台式电脑",
              "区域名称": "广州",
              "年份": "2021",
              "季度": "4",
              "销售额": 1400,
              "目标完成比": 98
            },
            {
              "商品": "台式电脑",
              "区域名称": "杭州",
              "年份": "2021",
              "季度": "4",
              "销售额": 1400,
              "目标完成比": 98
            },
            {
              "商品": "PURA70",
              "区域名称": "北京",
              "年份": "2021",
              "季度": "4",
              "销售额": 7900,
              "目标完成比": 98
            },
            {
              "商品": "PURA70",
              "区域名称": "上海",
              "年份": "2021",
              "季度": "4",
              "销售额": 8200,
              "目标完成比": 99
            },
            {
              "商品": "PURA70",
              "区域名称": "深圳",
              "年份": "2021",
              "季度": "4",
              "销售额": 8400,
              "目标完成比": 101
            },
            {
              "商品": "PURA70",
              "区域名称": "广州",
              "年份": "2021",
              "季度": "4",
              "销售额": 8400,
              "目标完成比": 103
            },
            {
              "商品": "PURA70",
              "区域名称": "杭州",
              "年份": "2021",
              "季度": "4",
              "销售额": 8400,
              "目标完成比": 108
            }
          ]
        }
      ],
      xzOnUpdateDatasetList: [
        {
          "name": "商品区域销售",
          "id": "商品区域销售",
          "columns": [
            {
              "name": "商品",
              "data_type": 3
            },
            {
              "name": "区域名称",
              "data_type": 3
            },
            {
              "name": "销售额",
              "data_type": 2
            }
            ,
            {
              "name": "年份",
              "data_type": 3
            },
            {
              "name": "季度",
              "data_type": 3
            },
            {
              "name": "目标完成比",
              "data_type": 2
            }
          ],
          "params": [
            {
              "name": "商品",
              "data_type": 3
            },
            {
              "name": "区域名称",
              "data_type": 3
            }
          ]
        }
      ],
      options: {
        mode: 'read',  //  报表模式  read | edit  只读模式|编辑模式
        view: {
          width: () => document.documentElement.clientWidth,
          height: () => document.documentElement.clientHeight
        },   // 设置报表的宽高
        renderArrow: false,  // 是否显式 扩展方向图标
        showFreeze: false,  // 是否显式冻结线
        showGrid: false  // 是否显式网格线

      }
    }
  },
  mounted() {
    this.options.onUpdateDatasetList = this.onUpdateDatasetList
    try {
      // eslint-disable-next-line no-undef
      this.spreadSheet = XZReport("#xzreport_1_echo", option, sheetConfig, data);
    } catch (error) {
      console.log('..........created,throw errors:', error)
    }
  },
  methods: {
    onUpdateDatasetList() {
      return new Promise((resolve, reject) => {
        if( this.isReject ) {
          return reject([])
        }else{
          return resolve(this.xzOnUpdateDatasetList)

        }
      })
    },
    onUpdateData(datasets, params) {
      console.log(datasets,params)
      return new Promise((resolve, reject) => {
        if( this.isReject ) {
          return reject([])
        }else{
          resolve(this.xzOnUpdateData)
        }

      })
    },
    saveData(reportDesignerPreviewId) {
      // config 为报表配置 ， data为 数据配置
      console.log(reportDesignerPreviewId)
      const { config, data } = this.sheetDesign.getData() // 报表设计器的保存事件
      // usePreStore.saveReportDesignerPreviewData(reportDesignerPreviewId, config, data)
      console.log(config)
      console.log(data)
    }

  }
}
</script>
